<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>综合服务系统</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/it/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--扩展样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/common/css/extended.css">
    <style>
        /*body{*/
        /*	width: 100%;*/
        /*	height: 100vh;*/
        /*}*/
        .titlePic {
            width: 100%;
        }

        .titlePic img {
            width: 100%;
        }

        .task {
            width: 1150px;
            margin: 30px auto;
        }

        .title {
            height: 30px;
            line-height: 30px;
            display: flex;
        }

        .category {
            width: 30%;
            height: 40px;
            line-height: 40px;
            display: flex;
            font-size: 16px;
        }

        .category div {
            flex: 1;
        }

        .kscontent {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        .kscontent .info {
            width: 265px;
        }

        .kscontent .info img {
            width: 263px;
            height: 190px;
        }

        .courseTitle {
            font-size: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .time {
            font-size: 14px;
            color: #828282;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .textResult {
            margin-bottom: 200px;
        }

        .textTitle {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: #3E7CE7;
            color: #fff;
            display: flex;
            font-size: 14px;
            border-radius: 10px 10px 0 0;
        }

        .textName {
            flex: 1;
            text-align: center;
        }

        .textTime {
            flex: 3;
            text-align: center;
        }

        .textOperation {
            flex: 1.5;
        }

        .textInfo {
            width: 100%;
            height: 45px;
            line-height: 45px;
            display: flex;
            border-bottom: 1px solid #bdbdbd;
            font-size: 14px;
        }

        .name {
            flex: 1;
            text-align: center;
        }

        .times {
            flex: 3;
            text-align: center;
        }

        .operation {
            flex: 1.5;
            color: #3e7ce7;
        }

    </style>
</head>

<body>
<#--	头部-->
<div class="header">
    <div class="head" style="height: 60px;line-height: 60px;padding-left: 10%;">
        <img src="${re.contextPath}/plugin/common/images/2@2x.png" style="width: 150px">
    </div>
    <div class="head" style="display: flex;">
        <div class="nav">
            <div class="headNav">首页</div>
            <div class="headNav">我的</div>
        </div>
        <div class="userInfo">
            <p>欢迎您，XXX</p>
            <img src="${re.contextPath}/plugin/common/images/tx.png" style="width: 50px;margin-left: 20px">
        </div>
    </div>
</div>
<#--内容-->
<div class="container">
    <div class="titlePic"><img src="${re.contextPath}/plugin/common/images/hb.png"></div>
    <#--考试任务-->
    <div class="task">
        <div class="title">
            <img src="${re.contextPath}/plugin/common/images/rw.png" style="width: 20px;height: 20px">
            <p style="margin-left: 10px;font-size: 18px">考试任务</p>
        </div>
        <div class="category">
            <div>正式考试</div>
            <div style="text-align: center">联系</div>
            <div style="text-align: right">考试结果</div>
        </div>
        <#--			正式考试-->
        <div class="kscontent">
            <div class="info">
                <img src="${re.contextPath}/plugin/common/images/fm.png">
                <p class="courseTitle">课程名称非公经济风格和哈哈哈哈哈哈</p>
                <p class="time">2021-07-30 | 1小时 | 60分为合格</p>
                <div style="font-size: 14px;display: flex;justify-content: space-between">
                    <p style="font-size: 14px;color: #828282">剩余补考次数：3次</p>
                    <p style="width: 80px;height: 36px;border-radius: 50px;background-color: #3e7ce7;color: #fff;line-height: 36px;text-align: center">
                        开始考试</p>
                </div>
            </div>
            <div class="info">
                <img src="${re.contextPath}/plugin/common/images/fm.png">
                <p class="courseTitle">课程名称非公经济风格和哈哈哈哈哈哈</p>
                <p class="time">2021-07-30 | 1小时 | 60分为合格</p>
                <div style="font-size: 14px;display: flex;justify-content: space-between">
                    <p style="font-size: 14px;color: #828282">剩余补考次数：3次</p>
                    <p style="width: 80px;height: 36px;border-radius: 50px;background-color: #3e7ce7;color: #fff;line-height: 36px;text-align: center">
                        开始考试</p>
                </div>
            </div>
            <div class="info">
                <img src="${re.contextPath}/plugin/common/images/fm.png">
                <p class="courseTitle">课程名称非公经济风格和哈哈哈哈哈哈</p>
                <p class="time">2021-07-30 | 1小时 | 60分为合格</p>
                <div style="font-size: 14px;display: flex;justify-content: space-between">
                    <p style="font-size: 14px;color: #828282">剩余补考次数：3次</p>
                    <p style="width: 80px;height: 36px;border-radius: 50px;background-color: #3e7ce7;color: #fff;line-height: 36px;text-align: center">
                        开始考试</p>
                </div>
            </div>
            <div class="info">
                <img src="${re.contextPath}/plugin/common/images/fm.png">
                <p class="courseTitle">课程名称非公经济风格和哈哈哈哈哈哈</p>
                <p class="time">2021-07-30 | 1小时 | 60分为合格</p>
                <div style="font-size: 14px;display: flex;justify-content: space-between">
                    <p style="font-size: 14px;color: #828282">剩余补考次数：3次</p>
                    <p style="width: 80px;height: 36px;border-radius: 50px;background-color: #3e7ce7;color: #fff;line-height: 36px;text-align: center">
                        开始考试</p>
                </div>
            </div>
        </div>

        <#--			练习-->
        <div class="kscontent">
            <div class="info">
                <img src="${re.contextPath}/plugin/common/images/fm.png">
                <p class="courseTitle">课程名称非公经济风格和哈哈哈哈哈哈</p>
                <p class="time">2021-07-30 | 1小时 | 60分为合格</p>
                <div style="font-size: 14px;display: flex;justify-content: space-between">
                    <p style="font-size: 14px;color: #828282">剩余补考次数：3次</p>
                    <p style="width: 80px;height: 36px;border-radius: 50px;background-color: #3e7ce7;color: #fff;line-height: 36px;text-align: center">
                        开始考试</p>
                </div>
            </div>
            <div class="info">
                <img src="${re.contextPath}/plugin/common/images/fm.png">
                <p class="courseTitle">课程名称非公经济风格和哈哈哈哈哈哈</p>
                <p class="time">2021-07-30 | 1小时 | 60分为合格</p>
                <div style="font-size: 14px;display: flex;justify-content: space-between">
                    <p style="font-size: 14px;color: #828282">剩余补考次数：3次</p>
                    <p style="width: 80px;height: 36px;border-radius: 50px;background-color: #3e7ce7;color: #fff;line-height: 36px;text-align: center">
                        开始考试</p>
                </div>
            </div>
            <div class="info">
                <img src="${re.contextPath}/plugin/common/images/fm.png">
                <p class="courseTitle">课程名称非公经济风格和哈哈哈哈哈哈</p>
                <p class="time">2021-07-30 | 1小时 | 60分为合格</p>
                <div style="font-size: 14px;display: flex;justify-content: space-between">
                    <p style="font-size: 14px;color: #828282">剩余补考次数：3次</p>
                    <p style="width: 80px;height: 36px;border-radius: 50px;background-color: #3e7ce7;color: #fff;line-height: 36px;text-align: center">
                        开始考试</p>
                </div>
            </div>
            <div class="info">
                <img src="${re.contextPath}/plugin/common/images/fm.png">
                <p class="courseTitle">课程名称非公经济风格和哈哈哈哈哈哈</p>
                <p class="time">2021-07-30 | 1小时 | 60分为合格</p>
                <div style="font-size: 14px;display: flex;justify-content: space-between">
                    <p style="font-size: 14px;color: #828282">剩余补考次数：3次</p>
                    <p style="width: 80px;height: 36px;border-radius: 50px;background-color: #3e7ce7;color: #fff;line-height: 36px;text-align: center">
                        开始考试</p>
                </div>
            </div>
        </div>

        <#--			考试结果-->
        <div class="textResult">
            <div class="textTitle">
                <div class="textName">考试名称</div>
                <div class="textTime">作答时间</div>
                <div class="textOperation">操作</div>
            </div>
            <div class="textInfo">
                <div class="name">如何看待大学生创业</div>
                <div class="times">2021-07-02 16:45:17</div>
                <div class="operation">查看详情</div>
            </div>
            <div class="textInfo">
                <div class="name">如何看待大学生创业</div>
                <div class="times">2021-07-02 16:45:17</div>
                <div class="operation">查看详情</div>
            </div>
        </div>
    </div>
</div>

<#--考试提醒  遮罩层-->
<div class="mask" style="width: 100%;height: 100%;position: fixed;top: 0;background: rgba(0,0,0,0.5);z-index: 1;">
    <div class="tips"
         style="width: 1100px;height: auto;background-color: #fff;margin: 150px auto;overflow: hidden;padding-top: 40px;border-radius: 4px;">
        <div class="tipsPic" style="width: 1000px;margin: 0 auto;border-radius: 10px;margin-bottom: 20px">
            <img src="${re.contextPath}/plugin/common/images/hb2.png"
                 style="width: 1000px;height: 280px;border-radius: 10px;">
        </div>
        <div class="tipsTitle" style="width: 85%;margin-top: 20px;margin: 0 auto;text-align: center;">
            <div style="height: 30px;line-height: 30px;margin: 0 auto;font-size: 17px;">系统知识考试名称</div>
            <p style="width: 100%;height: 30px;line-height: 30px;font-size: 13px;color: #828282;">总分：100 及格分：60 类别：建筑 |
                考试开始时间：2021-07-14 16:00 | 考试结束时间：2021-07-15 16:00</p>
        </div>
        <div style="width: 1050px;border: 1px solid #f2f2f2;margin: 0 auto"></div>
        <div class="tipsWord" style="width: 1000px;margin-top: 15px;font-size: 15px;color: #828282;margin: 0 auto">
            <p>描述适当补偿技术大版这是一个成语典故;这个成语和郑人买履是近义词;它用来比喻死守教条、拘泥成法;这个故事发生在一个楚国人渡江的途中;这个故事和剑有关。感谢体验</p>
            <p>麦塔提供不同场景的考试服务方案，全方位满足各行各业多样化的考试需求︰资格考试、招聘考试、员工考试、需求调研、渠道考试、随堂测验、知识竞赛、模拟考试</p>
            <p>咨询电话:400-052-2130</p>
        </div>
        <div class="tipsBtn"
             style="width: 315px;height: 45px;display: flex;justify-content: space-between;line-height: 45px;text-align: center;margin: 20px auto;margin-bottom: 50px">
            <div class="close"
                 style="width: 90px;border: 1px solid #828282;color: #828282;box-sizing: border-box;border-radius: 10px">
                取消
            </div>
            <div class="nextText" style="width: 90px;background-color: #3e7ce7;color: #fff;border-radius: 10px">去考试
            </div>
        </div>
    </div>
</div>
</body>

</html>
